<template>
    <div class="main-content">
        <div class="pad_20">
            <div class="concent_title">
                <span></span>
                <b>分销佣金-机构详情</b>
                <hr style="height:3px;">
            </div>
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <h3 class="panel-title">结佣记录</h3>
                </div>
                <div class="panel-body">
                    <table class="table">
                        <thead>
                        <tr><td>序号</td><td>机构名称</td><td>结佣日期</td><td>结算佣金</td><td>操作人</td></tr>
                        </thead>
                        <tbody>
                        <tr v-if="settlementRecord.settmentUserName">
                            <td>{{settlementRecord.number}}</td>
                            <td>{{settlementRecord.agentCompanyName}}</td>
                            <td>{{settlementRecord.actualDateStr}}</td>
                            <td>{{settlementRecord.actualCommission}}</td>
                            <td>{{settlementRecord.settmentUserName}}</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">汇总数据</h3>
                </div>
                <div class="panel-body">
                    <table class="table">
                        <thead>
                        <tr><td>机构名称</td><td>成交房间套数</td><td>成交总额</td><td>待结佣日期</td><td>待结算佣金</td><td>佣金状态</td></tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>{{settlementRecord.agentCompanyName}}</td>
                            <td>{{settlementRecord.dealNum}}</td>
                            <td>{{settlementRecord.dealAmount}}</td>
                            <td>{{settlementRecord.pendingDateStr}}</td>
                            <td>{{settlementRecord.pendingCommission}}</td>
                            <td>{{settlementRecord.commissionStatus}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">机构佣金明细数据</h3>
                </div>
                <div class="panel-body">
                    <table class="table" >
                        <thead>
                        <tr><td>序号</td><td>报备ID</td><td>楼盘名称</td><td>房间号</td><td>客户姓名</td><td>客户电话</td><td>计价面积(㎡)</td><td>成交总价(元)</td><td>签约日期</td><td>合作机构名称</td><td>经纪人姓名</td><td>经纪人电话</td><td>结佣方式</td><td>佣金状态</td><td>结算周期</td></tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in commissionDetailList" v-if="item.id">
                            <td >{{(params.pageNo-1)*params.pageSize+index+1}}</td><td>{{item.id}}</td><td>{{item.premisesName}}</td><td>{{item.roomName}}</td><td>{{item.name}}</td><td>{{item.mobile}}</td><td>{{item.valuationArea}}</td><td>{{item.dealAmount}}</td><td>{{item.signTime}}</td><td>{{item.staffCompanyName}}</td><td>{{item.staffName}}</td><td>{{item.staffPhone}}</td><td>{{item.commissionWay}}</td><td>{{item.commissionStatus}}</td><td>{{item.settlementCycle}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div id="boebei_num"style="text-align: center;"></div>
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                commissionDetailList:[],
                settlementRecord:{},
                params:{
                    pageNo:1,
                    pageSize:10,
                    id:this.$route.params.id
                }
            }
        },
        mounted(){
            this.getSettlementPage();
            this.getSettlementRecord();
        },
        methods:{
            //获取佣金报备记录
            getSettlementPage:function(){
                var _self = this;
                var url =  _self.utilHelper.apiUrl+"/api/getSettlementPage";
                var body = {};
                body.params = this.params;
                _self.$http.post(url, body).then((response) => {
                    var body = response.body;
                    if(body.result == '1'){
                        _self.commissionDetailList = body.resData.page.rows;
                        var current = body.resData.page.pageNumber;
                        var total = body.resData.page.total;
                        var totalPages = body.resData.page.totalPages;
                       // _self.showPage(body.page.total,body.page,body.page.totalPages);
                        if(totalPages >= 0) {
                            layui.laypage.render({
                                elem: $('#boebei_num'), //容器。值支持id名、原生dom对象，jquery对象,
                                limit:_self.params.pageSize,
                                curr:current,
                                count:total,
                                theme: '#f87242;', //皮肤
                                first: '首页', //若不显示，设置false即可
                                last: '尾页', //若不显示，设置false即可
                                prev: '上一页', //若不显示，设置false即可
                                next: '下一页', //若不显示，设置false即可
                                layout:['prev', 'page', 'next','skip','count'],

                                jump: function(obj,first){
                                    if(!first){
                                        _self.params.pageNo=obj.curr;
                                        _self.getSettlementPage();
                                    }
                                }
                            });
                        }

                    }
                })
            },
            //获取佣金记录
            getSettlementRecord:function(){
                var _self = this;
                var url =  _self.utilHelper.apiUrl+"/api/getSettlementRecord";
                var body = {};
                body.params = {id:this.$route.params.id};
                _self.$http.post(url, body).then((response) => {
                    var body = response.body;
                    if(body.result == '1'){
                        _self.settlementRecord = body.resData;
                        if(_self.settlementRecord){
                            _self.settlementRecord.number = 1;
                        }
                    }
                })
            },
            showPage:function(total,currer,totalPages){
                var _self = this;
                if(totalPages>0){
                    layui.laypage.render({
                        elem: 'boebei_num', //容器。值支持id名、原生dom对象，jquery对象,
                        pages: totalPages, //总页数
                        limit:10,
                        curr:currer,
                        count:total,//总数量
                        theme: '#09C', //皮肤
                        first: '首页', //若不显示，设置false即可
                        last: '尾页', //若不显示，设置false即可
                        prev: '上一页', //若不显示，设置false即可
                        next: '下一页', //若不显示，设置false即可
                        layout:['prev', 'page', 'next','count'],
                        jump: function(obj,first){
                            if(!first){
                                var currPage=obj.curr;
                                _self.params.pageNo = currPage;
                                _self.getSettlementPage();
                            }
                        }
                    });
                }else{
                    $("#boebei_num").html("");
                }
            }
        },
        components:{
        }
    }
</script>
